import React from 'react'
import WithHeader from './containers/WithHeader'
import List from './components/List/List'
import WithFooter from './containers/WithFooter'
import WithItem from './containers/WithItem'

import './App.css'

export default function App(props) {
  console.log(props)
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <WithHeader></WithHeader>
        {props.list.length ? (
          <div>
            <List>
              {props.list.map((item) => (
                <WithItem key={item.id} todo={item}></WithItem>
              ))}
            </List>
            <WithFooter></WithFooter>
          </div>
        ) : (
          <h1>恭喜您没有任务哦</h1>
        )}
      </div>
    </div>
  )
}
